<template>
	<view class="container">
    <view class="order">
      <view class="box">
        <!-- <image class="avatar" src="/images/logo.png" /> -->
        <view class="school-name">{{schoolName}}</view>
        <view class="title">元集校服定制</view>
        <view class="form">
          <view class="form-item">
            <view class="u-flex label">
              <text class="icon">*</text>
              <text class="name">学生姓名</text>
            </view>
            <input :value="name" data-type="name" @input="onInput" />
          </view>
          <view class="form-item">
            <view class="u-flex label">
              <text class="icon">*</text>
              <text class="name">学部</text>
            </view>
            <view class="class-name" @tap="translate">{{className}}</view>
          </view>
          <view class="form-item">
            <view class="u-flex label">
              <text class="icon">{{ is_need_id == 1 ? "*" : ""}}</text>
              <view class="name">身份证号</view>
            </view>
            <input :value="personId" data-type="card" @input="onInput"/>
          </view>
          <view class="form-item">
            <view class="u-flex label">
              <text class="icon">*</text>
              <text class="name">手机号</text>
            </view>
            <input :value="phone" data-type="phone" @input="onInput"/>
          </view>
        </view>
        <view class="info">
          <view>{{goodsName}}</view>
          <view>￥{{money}}</view>
        </view>
        <!-- 协议 -->
        <view class="agreement">
          <checkbox-group class="checkbox-dot" @change="onChange">
            <checkbox class="checkbox-dot" :checked="false" value="cb" style="transform:scale(0.6)"  />
            同意已阅读<text @tap="onRead('1')">《用户服务协议》</text>和<text @tap="onRead('2')">《隐私政策》</text>
          </checkbox-group>
        </view>
        <view class="pay" @tap="onPay">点击支付</view>
      </view>
    </view>
	</view>
  <view
    class="animation-element-wrapper"
    :animation="animation"
    :style="'visibility:' + (show ? 'visible':'hidden')"
    @tap.stop="hiddenFloatView"
  >
    <view
      class="animation-element"
      @tap.stop="nono"
    >
      <text
        class="right-bt"
        @tap.stop="hiddenFloatView"
      >
        确定
      </text>
      <view class="line" />
      <picker-view
        indicator-style="height: 50rpx;"
        @change="bindChangeClass"
        @tap.stop="nono"
      >
        <!--班级-->
        <picker-view-column>
          <view
            v-for="(item, index) in classList"
            :key="index"
          >
            {{ item.name }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script setup>
const name = ref('')
const schoolId = ref('')
const schoolName = ref('')
const xueNo = ref('')
const goodsName = ref('')
const classId = ref('')
const className = ref('')
const personId = ref('')
const phone = ref('')
const money = ref('')
const is_need_id = ref('')
const classList = ref([])
const classData = ref([])
const visible = ref(false)
const checked = ref([])
onLoad((options) => {
  const id = options.schoolId
  if(id){
    schoolId.value = id
    getSchoolInfo()
    getClassList()
  } else if(options && options.q){
    uniLogin()
    const data = decodeURIComponent(options.q)
    schoolId.value = data?.split('m/')[1]
    if(schoolId.value){
      getSchoolInfo()
      getClassList()
    }
  }
})

/**
 * 静默登录
 */
const uniLogin = () => {
  uni.login({
    provider: 'weixin',
    success: (res) => {
      uni.request({
        url: `https://xinxuenian.yztwlkj.com/base/getOpenIdByCode/${res.code}`,
        method: 'GET',
        data: {},
        header: {
          'content-type': 'application/json',
        },
      }).then(({ data }) => {
        uni.setStorageSync('openId', data?.openId)
      })
    },
    fail: (error) => {
      console.error('登录失败：', error);
    }
  })
}
/**
 * 获取学校信息
 */
const getSchoolInfo = () => {
  http.request({
    url: '/api/school/info',
    method: 'POST',
    data: { id: schoolId.value }
  }).then(({ data }) => {
    if(data?.success){
      goodsName.value = data?.data[0]?.goods_name ?? ""
      schoolName.value = data?.data[0]?.name ?? ""
      money.value = data?.data[0]?.money ?? null
      is_need_id.value = data?.data[0]?.is_need_id ?? null
    }
  })
}

/**
 * 获取学校信息
 */
const getClassList = () => {
  http.request({
    url: '/xcx/classList',
    method: 'POST',
    data: { schoolId: schoolId.value }
  }).then(({ data }) => {
    if(data?.key == 0) {
      uni.hideLoading()
      classList.value = data?.result ?? []
      const { id, name } = classList.value[0]
      classId.value = id
      className.value = name
    }
  })
}
/**
 * 输入框的值
 */
const onInput = (e) => {
  const { type } = e.currentTarget.dataset
  const value = e.detail.value
  if (type == 'name') {
    name.value = value
  } else if (type == 'card') {
    personId.value = value
  } else {
    phone.value = value
  }
}
const onChange = (e) => {
  checked.value = e.detail.value
}
let t = 0
let moveY = 200
const show = ref('')
/**
 * 移动按钮点击事件
 */
const translate = () => {
  if (t == 0) {
    moveY = 0
    show.value = true
    t = 1
  } else {
    moveY = 200
    show.value = false
    t = 0
  }
  animationEvents(moveY, show.value)
}

/**
 * 隐藏弹窗浮层
 */
const hiddenFloatView = () => {
  moveY = 200
  show.value = false
  t = 0
  animationEvents(moveY, show.value)
}

const animation = ref('')
/**
 * 动画事件
 */
const animationEvents = (moveY, showParam) => {
  animation.value = uni.createAnimation({
    transformOrigin: '50% 50%',
    duration: 400,
    timingFunction: 'ease',
    delay: 0
  })
  animation.value.translateY(moveY + 'vh').step()
  animation.value = animation.value.export()
  show.value = showParam
}

const bindChangeClass = (e) => {
  // 判断滑动的是第几个column
  const val = e.detail.value
  classList.value?.map((m, index) => {
    if (index == val[0]) {
      console.log(m.id, m.name);
      classId.value = m.id
      className.value = m.name
    }
  })
}

const showToast = (title) => {
  uni.showToast({
    title,
    icon: 'none',
    duration: 1500
  })
}
/**
 * 支付
 */
const onPay = () => {
  const openId = uni.getStorageSync('openId')
  const cardReg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
  const phoneReg = /^1[34578]\d{9}$/
  // wx.setStorageSync('path', '/pages/order/index')
  if(openId){
    if(!name.value){
      showToast('请输入姓名')
    } else if(!classId.value){
      showToast('请选择学部')
    } else if(is_need_id.value == 1 && !personId.value){
      showToast('请输入身份证号')
    } else if(is_need_id.value == 1 && !cardReg.test(personId.value)) {
      showToast('请输入正确格式的身份证号')
    } else if(!phone.value){
      showToast('请输入手机号')
    } else if(!phoneReg.test(phone.value)) {
      showToast('请输入正确格式的手机号')
    } else if(checked.value.length == 0){
      uni.showToast({
        title: '请勾选《用户服务协议》《隐私协议》！',
        icon: 'none'
      })
      return
    } else {
      http.request({
        url: '/base/jsapiPay',
        method: 'POST',
        data: {
          openId: openId,
          name: name.value,
          schoolId: schoolId.value,
          claasId: classId.value,
          className: className.value,
          personId: personId.value,
          phone: phone.value
        },
      }).then(({ data }) => {
        console.log(data, 111);
        if(data?.key == 0) {
          uni.requestPayment({
            provider: 'wxpay',
            appId: data?.result?.appid,
            nonceStr: data?.result?.noncestr,
            package: data?.result?.prepayid,
            paySign: data?.result?.sign,
            signType: data?.result?.signType,
            timeStamp: data?.result?.timestamp?.toString(),
            success: function(res){
              uni.hideLoading()
              showToast('支付成功')
              setTimeout(() => {
                const orderNumbers = 1
                uni.navigateTo({
                  url: '/pages/success/success'
                })
              }, 1200)
            },
            fail: function(res){
              console.log(res, 111111);
              showToast('支付失败，请重新支付')
            }
          })
        }
      })
    }
  }
}


</script>

<style lang="scss" scoped>
.order{
  padding: 30rpx;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url(https://xinxuenian.yztwlkj.com/bj.jpg) no-repeat 100% 100%;
  box-sizing: border-box;
}
.box{
  position: relative;
  padding: 40rpx 0;
  background: #fff;
  border-radius: 10rpx;
}
.avatar{
  position: absolute;
  top: -80rpx;
  left: 50%;
  transform: translate(-50%);
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 10rpx solid #fff;
}
.school-name{
  margin-top: 20rpx;
  color: #000;
  font-size: 32rpx;
  text-align: center;
}
.title{
  margin-top: 30rpx;
  font-size: 44rpx;
  font-weight: bold;
  text-align: center;
}
.form{
  margin: 0 auto;
  width: 600rpx;
}
.form-item{
  position: relative;
  margin-top: 30rpx;
}
.form-item input,
.form-item picker{
  padding-left: 188rpx;
  width: 100%;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 32rpx;
  background: #e5e4e4;
  border-radius: 16rpx;
  box-sizing: border-box;
}
.select_picker{
  width: 100%;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 32rpx;
  background: #e5e4e4;
  border-radius: 16rpx;
  box-sizing: border-box;
}
.label{
  position: absolute;
  top: 50%;
  left: 20rpx;
  transform: translateY(-50%);
  color: #000;
  font-size: 32rpx;
  display: flex;
  align-items: center;
}
.form-item .label .icon {
  width: 20rpx;
  display: flex;
  align-items: center;
  color: red;
}
.form-item .label .name{
  width: 138rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align:justify;
}
.form-item .label .name::after{
  content: "";
  width: 100%;
  display: inline-block;
}
.info{
  margin-top: 45rpx;
  padding-top: 60rpx;
  line-height: 64rpx;
  color: #000;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  border-top: 1px solid #b2b2b2;
}
.pay{
  margin: 80rpx auto 0;
  width: 280rpx;
  height: 64rpx;
  line-height: 64rpx;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border-radius: 64rpx;
  background: #2a6dca;
}
.picker-view {
  margin-top: 20rpx;
  width: 100%;
  height: 500rpx;
  .item {
    line-height: 100rpx;
    text-align: center;
  }
}
.class-name{
  padding-left: 188rpx;
  width: 100%;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 32rpx;
  background: #e5e4e4;
  box-sizing: border-box;
}
picker-view {
  background-color: white;
  padding: 0;
  width: 100%;
  height: 380rpx;
  bottom: 0;
  position: fixed;
  text {
    color: #999;
    display: inline-flex;
    position: fixed;
    margin-top: 20rpx;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    font-size: 34rpx;
    font-family: Arial, Helvetica, sans-serif;
  }
}
picker-view-column {
  view {
    vertical-align: middle;
    font-size: 28rpx;
    line-height: 28rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.animation-element-wrapper {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}
.animation-element {
  display: flex;
  position: fixed;
  width: 100%;
  height: 470rpx;
  bottom: 0;
  background-color: rgba(255, 255, 255, 1);
}
.animation-button {
  top: 20rpx;
  width: 290rpx;
  height: 100rpx;
  align-items: center;
}
.left-bt {
  left: 30rpx;
}
.right-bt {
  right: 20rpx;
  top: 20rpx;
  position: absolute;
  width: 80rpx !important;
}
.line {
  display: block;
  position: fixed;
  height: 2rpx;
  width: 100%;
  margin-top: 89rpx;
  background-color: #eee;
}
.agreement{
  padding: 20rpx;
  color: #333;
  font-size: 28rpx;
  text{
    color: #fc0130;
  }
}
</style>
